<template>
  <div class="user-details-container">
    <!-- 头部信息 -->
    <div class="header-section">
      <div class="avatar-container">
        <img :src="userInfo.avatar" alt="用户头像" class="avatar">
      </div>
      <div class="user-info">
        <h2>昵称：{{ userInfo.nickname }}</h2>
        <p>客户编号：{{ userInfo.customerId }}</p>
        <p>加入时间：{{ userInfo.joinTime }}</p>
        <p>客户渠道：{{ userInfo.channel }}</p>
      </div>
      <div class="action-buttons">
        <el-button type="primary" size="small">打标签</el-button>
        <el-button type="primary" size="small">修改积分</el-button>
        <el-button type="primary" size="small">送优惠券</el-button>
        <el-button type="primary" size="small">开通会员</el-button>
        <el-button type="success" size="small" @click="openMemberDialog">设置会员</el-button>
        <el-button type="danger" size="small">冻结</el-button>
      </div>
    </div>

    <!-- 标签部分 -->
    <div class="tags-section">
      <h3>标签：</h3>
      <div class="tags">
        <el-tag v-for="tag in userInfo.tags" :key="tag" type="primary" closable>{{ tag }}</el-tag>
      </div>
    </div>

    <!-- 内容部分 -->
    <div class="content-section">
      <!-- 消费信息 -->
      <div class="info-card">
        <h3>消费信息</h3>
        <div class="info-item">
          <p class="info-label">最近消费</p>
          <p>最近消费时间：{{ userInfo.lastConsumeTime }}</p>
          <p>最近消费金额：¥{{ userInfo.lastConsumeAmount }}</p>
        </div>
        <div class="info-item">
          <p class="info-label">累计消费&售后</p>
          <p>总消费金额：¥{{ userInfo.totalConsumeAmount }}</p>
          <p>总消费次数：{{ userInfo.totalConsumeTimes }}</p>
          <p>总售后金额：¥{{ userInfo.totalAfterSaleAmount }}</p>
          <p>总售后次数：{{ userInfo.totalAfterSaleTimes }}</p>
        </div>
        <div class="info-item">
          <el-button type="primary" size="small">点点看</el-button>
        </div>
      </div>

      <!-- 账户资产 -->
      <div class="info-card">
        <h3>账户资产</h3>
        <div class="info-item">
          <p class="info-label">积分</p>
          <p>当前积分：{{ userInfo.integral }}</p>
          <p>冻结积分：{{ userInfo.frozenIntegral }}</p>
          <p>累计积分：{{ userInfo.totalIntegral }}</p>
        </div>
        <div class="info-item">
          <p class="info-label">优惠券</p>
          <p>未使用：{{ userInfo.unusedCoupons }}张</p>
          <p>已使用：{{ userInfo.usedCoupons }}张</p>
          <p>已过期：{{ userInfo.expiredCoupons }}张</p>
        </div>
      </div>
    </div>

    <!-- 选项卡部分 -->
    <div class="tabs-section">
      <el-tabs v-model="activeTab">
        <el-tab label="基本信息"></el-tab>
        <el-tab label="交易明细"></el-tab>
        <el-tab label="积分明细"></el-tab>
        <el-tab label="优惠券明细"></el-tab>
      </el-tabs>

      <!-- 基本信息内容 -->
      <div class="tab-content" v-if="activeTab === '基本信息'">
        <div class="basic-info-item">
          <p class="info-label">姓名</p>
          <p>{{ userInfo.name }}</p>
        </div>
        <div class="basic-info-item">
          <p class="info-label">年龄</p>
          <p>{{ userInfo.age }}</p>
        </div>
        <div class="basic-info-item">
          <p class="info-label">邮箱</p>
          <p>{{ userInfo.email }}</p>
        </div>
        <div class="basic-info-item">
          <p class="info-label">生日</p>
          <p>{{ userInfo.birthday }}</p>
        </div>
        <div class="basic-info-item">
          <p class="info-label">性别</p>
          <p>{{ userInfo.gender }}</p>
        </div>
        <div class="basic-info-item">
          <p class="info-label">手机</p>
          <p>{{ userInfo.phone }}</p>
        </div>
        <div class="basic-info-item">
          <p class="info-label">余额</p>
          <p>¥{{ userInfo.balance }}</p>
        </div>
        <div class="basic-info-item">
          <p class="info-label">详细地址</p>
          <p>{{ userInfo.address }}</p>
        </div>
        <div class="basic-info-item">
          <el-button type="primary" size="small">点点看</el-button>
        </div>
      </div>
    </div>
  </div>

  <!-- 会员设置对话框 -->
  <el-dialog
    v-model="memberDialogVisible"
    title="设置会员"
    width="600px"
    :before-close="handleCloseMemberDialog"
  >
         <el-form :model="{ memberList: memberForm }" :rules="memberRules" ref="memberFormRef" label-width="120px">
       <el-form-item label="会员列表" prop="memberList">
         <div class="member-list">
           <div v-for="(member, index) in memberForm" :key="index" class="member-item">
            <el-row :gutter="20">
                             <el-col :span="12">
                 <el-form-item :label="'用户ID ' + (index + 1)" :prop="'memberList.' + index + '.userId'">
                   <el-input v-model="member.userId" placeholder="请输入用户ID" type="number" />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item :label="'会员ID ' + (index + 1)" :prop="'memberList.' + index + '.memberId'">
                   <el-input v-model="member.memberId" placeholder="请输入会员ID" type="number" />
                 </el-form-item>
               </el-col>
            </el-row>
            <el-button type="danger" size="small" @click="removeMember(index)" style="margin-top: 10px;">删除</el-button>
          </div>
        </div>
        <el-button type="primary" @click="addMember" style="margin-top: 10px;">添加会员</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="memberDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitMemberForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getUser, setMember } from '@/api/user/user';
import { ElMessage, ElMessageBox } from 'element-plus';

// 选项卡状态
const activeTab = ref('基本信息');

// 会员设置相关
const memberDialogVisible = ref(false);
const memberFormRef = ref(null);
const memberForm = ref([
  {
    userId: 1,
    memberId: 1
  }
]);

const memberRules = {
  'memberList': [
    { required: true, message: '请至少添加一个会员信息', trigger: 'change' }
  ]
};

// 用户信息
const userInfo = ref({
  nickname: '周杰伦',
  customerId: '784543232345',
  joinTime: '2022-09-19 9:39:39',
  channel: '百度小程序',
  avatar: 'https://example.com/avatar.jpg',
  tags: ['高消费用户', '新手妈妈', '数码达人', '大学生', '大促敏感用户', '晚间活跃用户'],
  lastConsumeTime: '2022-09-19 9:39:39',
  lastConsumeAmount: '299.00',
  totalConsumeAmount: '3299.00',
  totalConsumeTimes: 6,
  totalAfterSaleAmount: '56.00',
  totalAfterSaleTimes: 1,
  integral: 2343,
  frozenIntegral: 0,
  totalIntegral: 865443,
  unusedCoupons: 2,
  usedCoupons: 9,
  expiredCoupons: 18,
  name: '莱昂纳多·迪卡普里奥',
  age: 25,
  email: 'Leonardo@qq.com',
  birthday: '2001-07-22',
  gender: '男',
  phone: '13155555555',
  balance: 99,
  address: '中国CHINA'
});

// 页面加载时获取用户信息
onMounted(() => {
  // 假设我们从路由参数中获取用户ID
  const userId = '55555555'; // 这里应该是从路由中获取的实际用户ID
  getUser(userId).then(response => {
    // 这里应该根据实际的接口返回结构来设置userInfo
    // 由于没有实际的接口数据，我们暂时使用模拟数据
    // userInfo.value = response.data;
  }).catch(error => {
    console.error('获取用户信息失败:', error);
  });
});

// 打开会员设置对话框
function openMemberDialog() {
  memberDialogVisible.value = true;
  // 重置表单
  memberForm.value = [
    {
      userId: 1,
      memberId: 1
    }
  ];
}

// 添加会员项
function addMember() {
  memberForm.value.push({
    userId: 1,
    memberId: 1
  });
}

// 删除会员项
function removeMember(index) {
  if (memberForm.value.length > 1) {
    memberForm.value.splice(index, 1);
  } else {
    ElMessage.warning('至少需要保留一个会员信息');
  }
}

// 提交会员表单
function submitMemberForm() {
  memberFormRef.value.validate((valid) => {
    if (valid) {
      // 验证数据
      const isValid = memberForm.value.every(item => {
        return item.userId && item.memberId;
      });
      
      if (!isValid) {
        ElMessage.error('请填写完整的用户ID和会员ID');
        return;
      }
      
      // 调用设置会员接口 - 直接发送数组格式
      setMember(memberForm.value).then(response => {
        ElMessage.success('会员设置成功');
        memberDialogVisible.value = false;
      }).catch(error => {
        console.error('设置会员失败:', error);
        ElMessage.error('设置会员失败');
      });
    }
  });
}

// 关闭会员对话框
function handleCloseMemberDialog() {
  memberDialogVisible.value = false;
}
</script>

<style scoped>
.user-details-container {
  padding: 20px;
  background-color: #f5f5f5;
}

.header-section {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.avatar-container {
  margin-right: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #eee;
}

.user-info {
  flex: 1;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tags-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.content-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.info-card {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.info-item {
  margin-top: 15px;
}

.info-label {
  font-weight: bold;
  margin-bottom: 10px;
}

.tabs-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.tab-content {
  padding: 20px 0;
}

.basic-info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.basic-info-item .info-label {
  width: 100px;
  margin-bottom: 0;
}

/* 会员设置对话框样式 */
.member-list {
  max-height: 400px;
  overflow-y: auto;
}

.member-item {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fafafa;
}

.member-item:last-child {
  margin-bottom: 0;
}

.dialog-footer {
  text-align: right;
}
</style>